<template>
	<view>
		<view class="buttons-container">
			<button class="button" type="default" hover-class="none" @click="tz('/pages/index/Grzxml/Xitongshezhiml/Huanbangshouji')">
				<icon class="iconfont icon-huanbangshouji" style="font-size:24px;"></icon>
				<view class="button-text">换绑手机</view>
				<icon class="iconfont icon-xiangyou1" style="font-size:24px;"></icon>
			</button>
			<button class="button" type="default" hover-class="none" @click="tz('/pages/index/Grzxml/Xitongshezhiml/Xiugaimima')">
				<icon class="iconfont icon-xiugaimima" style="font-size:24px;"></icon>
				<view class="button-text">修改密码</view>
				<icon class="iconfont icon-xiangyou1" style="font-size:24px;"></icon>
			</button>
			<button class="button" type="default" hover-class="none" @click="tz('/pages/index/Grzxml/Xitongshezhiml/Xiaoxitongzhishezhi')">
				<icon class="iconfont icon-xiaoxishezhi" style="font-size:24px;"></icon>
				<view class="button-text">消息通知设置</view>
				<icon class="iconfont icon-xiangyou1" style="font-size:24px;"></icon>
			</button>
			<button class="button" type="default" hover-class="none" @click="qlhc">
				<icon class="iconfont icon-qinglihuancun" style="font-size:24px;"></icon>
				<view class="button-text">清理缓存</view>
				<icon class="iconfont icon-xiangyou1" style="font-size:24px;"></icon>
			</button>
			<button class="button" type="default" hover-class="none" @click="tc">
				<icon class="iconfont icon-tuichuzhanghao" style="font-size:24px;"></icon>
				<view class="button-text">退出</view>
				<icon class="iconfont icon-xiangyou1" style="font-size:24px;"></icon>
			</button>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				switch1Checked: false,
			}
		},
		methods: {
			tz(lj){
				wx.navigateTo({
					url:lj
				})
			},
			tc(){
				uni.setStorageSync('userinfo', {});
				wx.reLaunch({
					url:'/pages/index/Login'
				})
			},
			qlhc(){
				console.log("清理缓存")
			},
			switch1Change (e){
			    console.log(`Switch样式点击后是否选中：`, e.detail.value)
			  }
		}
	}
</script>

<style>
.content {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 20rpx;
}

.user-info {
  display: flex;
  align-items: center;
  margin-bottom: 30rpx; /* 增加间距 */
}

.avatar {
  width: 160rpx; /* 增大头像尺寸 */
  height: 160rpx;
  border-radius: 50%;
  margin-right: 30rpx; /* 增加间距 */
}

.user-details {
  display: flex;
  flex-direction: column;
  justify-content: center;
}

.name {
  font-size: 36rpx; /* 调整字号 */
  font-weight: bold;
  margin-bottom: 10rpx; /* 增加间距 */
}

.driver-id,
.phone {
  font-size: 30rpx; /* 调整字号 */
  color: #666;
  margin-bottom: 10rpx; /* 增加间距 */
}

.buttons-container {
  display: flex;
  flex-direction: column;
  width: 100%;
}

.button {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-top: 30rpx; /* 增加间距 */
  border-radius: 8rpx;
  width: 100%; /* 占据整个宽度 */
  height: 80rpx; /* 设置按钮高度 */
  line-height: 80rpx; /* 确保文本垂直居中 */
  padding: 0 20rpx; /* 添加左右内边距 */
}

.button-text {
  flex: 1;
  text-align: center; /* 文字居中 */
}

.icon-arrow-right {
  margin-left: 10rpx; /* 增加图标与文字之间的间距 */
}
</style>
